<template>
    <view class="rider_order_details">
        <riderCommonPopup key="order_details_popup"/>

        <div 
            class="bottom_fixed" 
            v-if="Object.keys(serverData).length>0 && sliderMenuInStatus.includes(serverData.order_status)&&Object.keys(orderToTabItem).length>0"
        >
            <riderActionBar 
                :serverData="serverData"
                :key="serverData.current_loca_key"
                :isReset="true"
                :dragBtnStyle="orderToTabItem.dragBtnStyle"
            />
        </div>

        <div class="order_details_title" v-if="Object.keys(serverData).length>0">
            <!-- 未完成状态显示区域 -->
            <div 
                class="title_progress autoPadding" 
                v-if="sliderMenuInStatus.includes(serverData.order_status)"
            >
                <div class="flex flexAlignItems justifySpaceBetween">
                    <div class="rider_title_left flex flexAlignItems">
                        <uni-icons type="paperplane" size="20"></uni-icons>
                        <div class="rider_title_time">
                            {{ serverData.remaining_minutes }}分钟内
                        </div>
                        <div class="rider_title_other">送达</div>
                    </div>
                    <div class="rider_title_right flex flexAlignItems">
                        <div class="rider_order_money">
                            ￥{{ serverData.rider_get_all_rebate_yuan }}
                        </div>
                    </div>
                </div>
                <div 
                    class="rider_title_time_out flex flexAlignItems font_size_18"
                    v-if="serverData.order_warning_text!=''"
                >
                    {{ serverData.order_warning_text }}
                </div>
            </div>
            <!-- 已成功显示区域 -->
            <div 
                class="title_progress autoPadding" 
                v-else-if="serverData.order_status==4"
            >
                <div  class="rider_title_time_out success_order_status flex flexAlignItems font_size_28">
                    订单已送达
                </div>
            </div>
            <div 
                class="title_progress autoPadding" 
                v-else-if="serverData.order_status==7"
            >
                <div  class="rider_title_time_out flex flexAlignItems font_size_28">
                    订单已超时
                </div>
            </div>

            <div class="rider_order_item_cont" v-if="Object.keys(serverData).length>0">
                <div class="item_cont autoPadding">
                    <div class="item_title_box">
                        <div class="item_title">
                            配送信息
                        </div>
                    </div>
                    <div class="item_u_time_line">
                        <u-time-line>
                            <u-time-line-item nodeTop="2">
                                <!-- 此处自定义了左边内容，用一个图标替代 -->
                                <template v-slot:node>
                                    <div class="u_node">
                                        <!-- 此处为uView的icon组件 -->
                                        <!-- <uni-icons  type="smallcircle-filled" size="10" color="#eb8433"></uni-icons> -->
                                        <div class="u_node_name u_node_name1">
                                            取
                                        </div>
                                    </div>
                                </template>
                                <template v-slot:content>
                                    <view class="flex justifySpaceBetween" v-if="serverData.store_info">
                                        <div>
                                            <view class="u-order-title">{{ serverData.store_info.store_name }}</view>
                                            <view class="u-order-desc">{{ serverData.store_info.store_address_info }}</view>
                                        </div>
                                        <uni-icons type="navigate" size="30" color="#333333"></uni-icons>
                                    </view>
                                </template>
                            </u-time-line-item>
                            <u-time-line-item nodeTop="2">
                                <!-- 此处自定义了左边内容，用一个图标替代 -->
                                <template v-slot:node>
                                    <view class="u_node">
                                        <!-- 此处为uView的icon组件 -->
                                        <!-- <uni-icons  type="smallcircle-filled" size="10" color="#ccc"></uni-icons> -->
                                        <div class="u_node_name">
                                            送
                                        </div>
                                    </view>
                                </template>
                                <template v-slot:content>
                                    <view>
                                        <view class="u-order-title">{{ serverData.user_address_text  }}</view>
                                        <view class="u-order-desc" v-if="serverData.user_address_json">{{ serverData.user_address_json.name }} {{ serverData.user_address_json.moblie }}</view>
                                    </view>
                                </template>
                            </u-time-line-item>
                        </u-time-line>
                    </div>
                </div>

                <div class="item_cont autoPadding">
                    <div class="item_title_box">
                        <div class="item_title">
                            商品列表
                        </div>
                    </div>
                    <div class="item_content">
                        <view class="goods-box">
                            <div v-if="serverData.moduleName == `foodTakeout`">
                                <block 
                                    v-for="(item,iKey) in serverData.product_list[0].check_result" 
                                    :key="iKey"
                                >
                                    <view class="goods-item">
                                        <view class="left">
                                            <image :src="item.product.product_icon[0].url" mode="aspectFill"></image>
                                        </view>
                                        <view class="right">
                                            <view class="row1">
                                                <view class="tit">
                                                    <text class="zk" v-if="item.product.product_discount!==0">折</text>
                                                    <text>{{ item.product.product_name }}</text>
                                                </view>
                                                <view class="old-price" v-if="item.product.product_discount!==0">
                                                    <text class="fh">¥</text><text class="lt">{{ computedTotalMoeny(item,'product_base_price')}}</text>
                                                </view>
                                                <view class="price">
                                                    <text class="fh">¥</text><text>{{ computedTotalMoeny(item,'product_base_real_price')  }}</text>
                                                </view>
                                            </view>
                                            <view class="row2">
                                                <text class="m-descripe">{{  item.inventoryShowName.join(`、`) }}</text>
                                            </view>
                                            <view class="row3">
                                                x<text>{{ item.count }}</text>
                                            </view>
                                        </view>
                                    </view>
                                </block>
                            </div>
                            <div class="pack_content" v-else>
                                <div class="item flexStyle" v-for="(it,i) in serverData.user_pack_list" :key="i">
                                    <div class="iconBox">
                                        <image src="~@/static/images/example2.png" class="commodityPic" />
                                    </div>
                                    <div class="infBox flex flexColumn justifySpaceBetween">
                                        <div class="top flex justifySpaceBetween">
                                            <div class="info flex">
                                                <div class="code">
                                                    {{it.verify_code}}
                                                </div>
                                                <div class="poayBtn noBorder" @click="baseCopy(it.verify_code)">复制</div>
                                            </div>
                                            <div class="money">
                                                <span class="m-moneyIcon">¥</span>{{it.currentPackMoney}}
                                            </div>
                                        </div>

                                        <div class="statusBox flex">
                                            <div 
                                                v-for="(item,index) in it.pack_type_text_list" :key="index"
                                                class="status" 
                                                :style="`color:${item.color};border-color:${item.borderColor}`">
                                                {{item.text}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div 
                                class="goods-item justifySpaceBetween row_item" 
                                v-if="serverData.moduleName == `foodTakeout`"
                            >
                                <div class="row_item_title">
                                    打包费
                                </div>
                                <div class="row_item_cont price">
                                    <text class="fh">¥</text><text>{{ serverData.store_info.store_food_pack_fee_format }}</text>
                                </div>
                            </div>
                            <div 
                                class="goods-item justifySpaceBetween row_item"
                                v-if="serverData.moduleName == `foodTakeout`"
                            >
                                <div class="row_item_title">
                                    合计
                                </div>
                                <div class="row_item_cont price">
                                    <text class="fh">¥</text><text>{{ serverData.priceTotal }}</text>
                                </div>
                            </div>
                            <view class="user_remark flex" v-if="serverData.user_remark!=''">
                                <div style="font-weight:bold">顾客备注：</div> {{ serverData.user_remark }}
                            </view>
                        </view>
                    </div>
                </div>

                <div class="item_cont autoPadding">
                    <div class="item_title_box">
                        <div class="item_title">
                            订单信息
                        </div>
                    </div>
                    <div class="item_content">
                        <div class="justifySpaceBetween row_item">
                            <div class="row_item_title">
                                订单号码
                            </div>
                            <div class="row_item_cont">
                                <div>{{ serverData.order_id.replace(/([a-z0-9]{4})/ig,'$1 ') }}</div>
                                <div class="copy_btn" @click="baseCopy(serverData.order_id)">复制</div>
                            </div>
                        </div>
                        <div class="justifySpaceBetween row_item">
                            <div class="row_item_title">
                                期望送达
                            </div>
                            <div class="row_item_cont">
                                <div>{{ getMoment(serverData.expected_delivery_max) }}</div>
                            </div>
                        </div>
                        <div class="justifySpaceBetween row_item">
                            <div class="row_item_title">
                                下单时间
                            </div>
                            <div class="row_item_cont">
                                <div>{{ getMoment(serverData.create_date) }}</div>
                            </div>
                        </div>
                        <!-- <div class="justifySpaceBetween row_item">
                            <div class="row_item_title">
                                收货人姓名
                            </div>
                            <div class="row_item_cont">
                                <div>张三</div>
                            </div>
                        </div>
                        <div class="justifySpaceBetween row_item">
                            <div class="row_item_title">
                                收货人电话
                            </div>
                            <div class="row_item_cont">
                                <div>13528471284</div>
                                <div class="call_btn flex flexAlignItems">
                                    <uni-icons type="phone-filled" class="icon_phone" color="#fff" size="17"></uni-icons>
                                    拨打
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
                <div class="item_cont autoPadding">
                    <div class="item_title_box">
                        <div class="item_title">
                            订单收入
                        </div>
                    </div>
                    <div class="item_content goods-box">
                        <div class="row_item justifySpaceBetween goods-item">
                            <div class="row_item_title">
                                平台奖励
                            </div>
                            <div class="row_item_cont price">
                                <text class="fh">¥</text><text>{{ serverData.platform_rewards_yuan }}</text>
                            </div>
                        </div>
                        <div class="row_item justifySpaceBetween goods-item">
                            <div class="row_item_title">
                                用户打赏
                            </div>
                            <div class="row_item_cont price">
                                <text class="fh">¥</text><text>{{ getBigJs(serverData.order_tips_money).div(100).toNumber() }}</text>
                            </div>
                        </div>
                        <div class="row_item justifySpaceBetween goods-item">
                            <div class="row_item_title">
                                配送费
                            </div>
                            <div class="row_item_cont price">
                                <text class="fh">¥</text><text>{{ serverData.rider_get_rebate_yuan }}</text>
                            </div>
                        </div>
                        <div class="row_item justifySpaceBetween goods-item">
                            <div class="row_item_title">
                                合计
                            </div>
                            <div class="row_item_cont price" style="color:#e6964a">
                                <text class="fh">¥</text><text>{{ serverData.rider_get_all_rebate_yuan }}</text>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

        </div>
    </view>
</template>

<script src="./order-details.ts" lang="ts"></script>

<style lang="stylus" scoped>
@import './order-details.styl';
</style>

